import React, { useMemo } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import { CodeEditor } from '../../components/codeEditor';
import { Problem, useGetCategoriesQuery } from '../../generated/graphql';
import { QuestionZone } from './questionZone';

interface Props {}

function useProblemIdParams() {
  const params = useParams<{ problemId: string }>();
  return Number(params.problemId);
}

export function ProblemPage({}: Props) {
  const history = useHistory();
  const problemId = useProblemIdParams();
  const categoriesQuery = useGetCategoriesQuery();

  const problem = useMemo(() => {
    //Sorry for this terrible code, I am in a hurry
    const categories = categoriesQuery.data?.categories ?? [];
    let want: Problem | undefined;
    categories.forEach((c) => {
      if (want) {
        return;
      }
      want = c.problems.find((p) => p._id === problemId);
    });
    return want;
  }, [categoriesQuery, problemId]);

  return (
    <>
      <div className="mx-24 my-4 grid grid-cols-2 divide-x">
        <div className="flex flex-col gap-4">
          <h1 className="text-3xl font-bold">{problem?.name}</h1>
          <div>{problem?.content}</div>
          <h2 className="text-2xl font-bold">提问区</h2>
          <QuestionZone />
        </div>
        <div className="pl-2" style={{ height: '36rem' }}>
          <CodeEditor />
        </div>
      </div>
    </>
  );
}
